<template>
  <div class="pricing-page">
    <GetBioJobNavbar />
    
    <div class="pricing-container">
      <h1 class="page-title">Choose Your Plan</h1>
      <p class="page-subtitle">
        Unlock full access to biopharma jobs and professional resume tools tailored to your career.
      </p>

      <!-- Pricing Cards -->
      <div class="pricing-cards">
        <!-- Free Plan -->
        <el-card class="pricing-card">
          <div class="plan-header">
            <h3 class="plan-name">Free Plan</h3>
            <div class="plan-price">
              <span class="price-amount">$0</span>
              <span class="price-period">/month</span>
            </div>
            <el-button class="plan-button" @click="$router.push('/sign-up')">Start Free</el-button>
          </div>
          <ul class="plan-features">
            <li class="feature-item">
              <i class="el-icon-check"></i>
              <span>Access to job listings 3 days delayed</span>
            </li>
            <li class="feature-item">
              <i class="el-icon-check"></i>
              <span>Use only limited resume templates</span>
            </li>
            <li class="feature-item">
              <i class="el-icon-check"></i>
              <span>Export up to 5 PDF resumes</span>
            </li>
            <li class="feature-item">
              <i class="el-icon-check"></i>
              <span>Basic AI recommendations</span>
            </li>
            <li class="feature-item disabled">
              <i class="el-icon-close"></i>
              <span>No Word (.docx) export</span>
            </li>
          </ul>
          <p class="plan-tagline">For exploring the platform.</p>
        </el-card>

        <!-- 7-Day Premium Trial -->
        <el-card class="pricing-card popular">
          <div class="popular-badge">Most Popular</div>
          <div class="plan-header">
            <h3 class="plan-name">7-Day Premium Experience</h3>
            <div class="plan-price">
              <span class="price-amount">Free for 7 days</span>
            </div>
            <el-button type="primary" class="plan-button" @click="$router.push('/sign-up')">Try Premium for Free</el-button>
          </div>
          <ul class="plan-features">
            <li class="feature-item">
              <i class="el-icon-check"></i>
              <span>Full access to all latest biopharma jobs (real-time updates)</span>
            </li>
            <li class="feature-item">
              <i class="el-icon-check"></i>
              <span>Unlock all resume templates</span>
            </li>
            <li class="feature-item">
              <i class="el-icon-check"></i>
              <span>Unlimited PDF + Word exports during trial</span>
            </li>
            <li class="feature-item">
              <i class="el-icon-check"></i>
              <span>Personalized job recommendations</span>
            </li>
            <li class="feature-item">
              <i class="el-icon-check"></i>
              <span>Resume feedback & priority support</span>
            </li>
          </ul>
          <p class="plan-tagline">Free to start</p>
        </el-card>

        <!-- Premium Member -->
        <el-card class="pricing-card">
          <div class="plan-header">
            <h3 class="plan-name">Premium Member</h3>
            <div class="plan-price">
              <span class="price-amount">$9.99</span>
              <span class="price-period">/month or $89/year</span>
            </div>
            <el-button type="primary" class="plan-button" @click="showUpgradeModal = true">Upgrade to Premium</el-button>
          </div>
          <ul class="plan-features">
            <li class="feature-item">
              <i class="el-icon-check"></i>
              <span>Full access to all latest job data</span>
            </li>
            <li class="feature-item">
              <i class="el-icon-check"></i>
              <span>All resume templates unlocked</span>
            </li>
            <li class="feature-item">
              <i class="el-icon-check"></i>
              <span>Unlimited PDF + Word exports</span>
            </li>
            <li class="feature-item">
              <i class="el-icon-check"></i>
              <span>AI resume optimization & priority support</span>
            </li>
            <li class="feature-item">
              <i class="el-icon-check"></i>
              <span>Personalized recommendations & early job alerts</span>
            </li>
          </ul>
          <p class="plan-tagline">Best for serious job seekers in biopharma.</p>
        </el-card>
      </div>

      <!-- Compare Plans Table -->
      <div class="compare-section">
        <h2 class="section-title">Compare Plans</h2>
        <el-table :data="compareData" border style="width: 100%">
          <el-table-column prop="feature" label="Feature" width="200"></el-table-column>
          <el-table-column prop="free" label="Free"></el-table-column>
          <el-table-column prop="trial" label="7-Day Trial"></el-table-column>
          <el-table-column prop="premium" label="Premium"></el-table-column>
        </el-table>
      </div>

      <!-- FAQ Section -->
      <div class="faq-section">
        <h2 class="section-title">FAQ</h2>
        <el-collapse v-model="activeFaq">
          <el-collapse-item title="What happens after the 7-day trial?" name="1">
            <div>After the 7-day trial, you can choose to continue with a Premium subscription or downgrade to the Free plan.</div>
          </el-collapse-item>
          <el-collapse-item title="Can I cancel anytime?" name="2">
            <div>Yes, you can cancel your subscription at any time. Your access will continue until the end of the current billing period.</div>
          </el-collapse-item>
          <el-collapse-item title="Are my resumes saved after downgrading?" name="3">
            <div>Yes, all your resumes are saved. However, you'll need Premium access to export them in Word format.</div>
          </el-collapse-item>
          <el-collapse-item title="How often are jobs updated?" name="4">
            <div>Jobs are updated in real-time, 24/7. Premium members get immediate access to new postings, while Free members see listings with a 3-day delay.</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>

    <!-- Upgrade Modal -->
    <el-dialog
      title="Upgrade to Premium"
      :visible.sync="showUpgradeModal"
      width="500px"
    >
      <div class="upgrade-modal-content">
        <p class="modal-subtitle">Secure checkout powered by Creem</p>
        <div class="plan-comparison">
          <div class="current-plan">
            <strong>Current Plan:</strong> Free Trial
          </div>
          <div class="new-plan">
            <strong>New Plan:</strong> Premium Membership
          </div>
          <div class="plan-cost">
            <strong>$9.99 / month</strong>
            <p class="auto-renew">Auto-renew, cancel anytime</p>
          </div>
        </div>
        <div class="payment-method">
          <h4>Payment Method</h4>
          <el-radio v-model="paymentMethod" label="creem">Creem Checkout</el-radio>
          <p class="payment-note">Fast and secure payment via Creem</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showUpgradeModal = false">Cancel</el-button>
        <el-button type="primary" @click="proceedPayment">Pay with Creem</el-button>
      </span>
    </el-dialog>

    <GetBioJobFooter />
  </div>
</template>

<script>
export default {
  name: 'PricingPage',
  data() {
    return {
      showUpgradeModal: false,
      paymentMethod: 'creem',
      activeFaq: [],
      compareData: [
        {
          feature: 'Job Data Access',
          free: '3-day delay',
          trial: 'Full Access',
          premium: 'Full Access'
        },
        {
          feature: 'Resume Templates',
          free: 'Limited',
          trial: 'All Templates',
          premium: 'All Templates'
        },
        {
          feature: 'Export Limit',
          free: '5 PDFs',
          trial: 'Unlimited',
          premium: 'Unlimited'
        },
        {
          feature: 'Export Format',
          free: 'PDF only',
          trial: 'PDF + Word',
          premium: 'PDF + Word'
        },
        {
          feature: 'Jobs Recommendation',
          free: 'yes',
          trial: 'yes',
          premium: 'Full'
        }
      ]
    }
  },
  methods: {
    proceedPayment() {
      this.$message.info('Redirecting to payment...')
      this.showUpgradeModal = false
    }
  }
}
</script>

<style scoped>
.pricing-page {
  min-height: 100vh;
  background-color: #fff;
}

.pricing-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px;
}

.page-title {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  color: #000;
  margin-bottom: 16px;
}

.page-subtitle {
  font-size: 18px;
  text-align: center;
  color: #666;
  margin-bottom: 48px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}

.pricing-card {
  position: relative;
  border: 2px solid #e5e5e5;
  transition: border-color 0.3s;
}

.pricing-card.popular {
  border-color: #000;
  transform: scale(1.05);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 4px 16px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.plan-header {
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 24px;
}

.plan-name {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  margin-bottom: 16px;
}

.plan-price {
  margin-bottom: 24px;
}

.price-amount {
  font-size: 32px;
  font-weight: bold;
  color: #000;
}

.price-period {
  font-size: 16px;
  color: #666;
}

.plan-button {
  width: 100%;
  background-color: #000;
  color: #fff;
  border: none;
  padding: 12px;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  color: #666;
}

.feature-item.disabled {
  opacity: 0.5;
}

.feature-item i {
  color: #67c23a;
  font-size: 18px;
  margin-top: 2px;
}

.feature-item.disabled i {
  color: #f56c6c;
}

.plan-tagline {
  text-align: center;
  color: #999;
  font-size: 14px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid #e5e5e5;
}

.compare-section {
  margin-bottom: 64px;
}

.section-title {
  font-size: 28px;
  font-weight: bold;
  color: #000;
  margin-bottom: 24px;
}

.faq-section {
  margin-bottom: 48px;
}

.upgrade-modal-content {
  padding: 20px 0;
}

.modal-subtitle {
  color: #666;
  font-size: 14px;
  margin-bottom: 24px;
}

.plan-comparison {
  margin-bottom: 24px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.current-plan,
.new-plan {
  margin-bottom: 12px;
}

.plan-cost {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
}

.auto-renew {
  font-size: 12px;
  color: #999;
  margin: 8px 0 0 0;
}

.payment-method {
  margin-top: 24px;
}

.payment-method h4 {
  margin-bottom: 16px;
  font-size: 16px;
}

.payment-note {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

@media screen and (max-width: 968px) {
  .pricing-cards {
    grid-template-columns: 1fr;
  }
  
  .pricing-card.popular {
    transform: scale(1);
  }
}
</style>

